<template>
	<view class="warp" style="background-color: #FFFFFF;">
		<view class="logon bmain " @click="examine">确&nbsp;认&nbsp;提&nbsp;交</view>
		<view class="home_top1"></view>
		<view class="info box box-s1">
			<view><text class="red">*</text>姓名：<input type="text" placeholder="请输入姓名" v-model="nickname"
					:disabled="disabled"></view>
			<view><text class="red">*</text>电话：<input type="text" maxlength="11" placeholder="请输入电话"
					v-model="worker_phone" :disabled="disabled"></view>
			<view><text class="red">*</text>紧急联系人：<input type="text" placeholder="请输入紧急联系人姓名" :disabled="disabled"
					v-model="contact_user_name"></view>
			<view><text class="red">*</text>紧急联系电话：<input type="text" maxlength="11" placeholder="请输入紧急联系人电话"
					v-model="contact_mobile" :disabled="disabled">
			</view>
			<view><text class="red">*</text>联系地址：<input type="text" placeholder="请输入紧急联系人地址" v-model="address"
					:disabled="disabled">
			</view>
			<view class="userId">
				<text class="red">*</text>请上传证件照： <text class="del" v-if="sfz1 || sfz2">*长按图片进行删除</text>
				<view>
					<view v-if="!sfz1">
						<text></text>
						<view style="text-align: center;">
							请上传身份证正面
							<view class="iconfont img-sfz" @click="choose">&#xe619;</view>
						</view>
					</view>
					<image v-else :src="sfz1" mode="" @longtap="del(1)"></image>
				</view>
				<view>
					<view v-if="!sfz2">
						<text></text>
						<view>
							请上传身份证反面
							<view class="iconfont img-sfz" @click="choose1">&#xe617;</view>
						</view>
					</view>
					<image v-else :src="sfz2" mode="" @longtap="del(2)"></image>
				</view>
			</view>

			<!-- 保险凭证 -->
			<view class="userId1">
				请上传保险凭证： <text class="del" v-if="pz.length !=0">*长按图片进行删除</text>
				<view class="imagess" v-if="pz.length !=0">
					<image v-for="(item,index) in pz" :key="index" :src="item" @longtap="del1(1,item,index)"></image>
				</view>
				<view>
					<view style="text-align: center;">
						请上传保险凭证
						<view class="iconfont img-sfz" @click="choose2">&#xe62c;</view>
					</view>
				</view>
			</view>

			<!-- 证书 -->
			<view class="userId1">
				请上传证书图片： <text class="del" v-if="zs.length !=0">*长按图片进行删除</text>
				<view class="imagess" v-if="zs.length !=0">
					<image v-for="(item,index) in zs" :key="index" :src="item" @longtap="del1(2,item,index)"></image>
				</view>
				<view>
					<view style="text-align: center;">
						请上传证书图片
						<view class="iconfont img-sfz" @click="choose3">&#xe633;</view>
					</view>
				</view>
			</view>
			<view class="footer" style="height: 200rpx;"></view>
		</view>
	</view>
</template>

<script>
	import {
		worker_verify,
		userinfo,
		upload
	} from '@/api/api.js'
	export default {

		data() {
			return {
				disabled: true,
				nickname: '',
				worker_phone: '',
				contact_user_name: '',
				contact_mobile: '',
				address: '',
				sfz1: "",
				sfz2: "",
				uploadUrl: "",
				token: "",
				userInfo: {},
				pz: [],
				zs: [],
			}
		},
		onLoad() {
			this.uploadUrl = uni.getStorageSync('uploadUrl')
			this.userInfo = uni.getStorageSync('userInfo')
			this.token = uni.getStorageSync('token')
			if (this.userInfo.verify_status == 0 || this.userInfo.verify_status == 3) return this.disabled = false
			if (this.userInfo.verify_status != 0) {
				this.disabled = true
				this.nickname = this.userInfo.nickname
				this.worker_phone = this.userInfo.worker_phone
				this.contact_user_name = this.userInfo.contact_user_name
				this.contact_user_name = this.userInfo.contact_user_name
				this.contact_mobile = this.userInfo.contact_mobile
				this.address = this.userInfo.addres
				this.pz = this.userInfo.insures || []
				this.zs = this.userInfo.certificate || []
				this.sfz1 = this.userInfo.id_card_pros
				this.sfz2 = this.userInfo.id_card_cons
			}

		},
		methods: {
			// 上传图片
			choose() {
				// 选择图片文件
				console.log('点击', this.disabled)
				if (this.disabled) return
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.sfz1 = res.tempFilePaths[0]
						uni.uploadFile({
							url: that.uploadUrl, //仅为示例，非真实的接口地址
							filePath: that.sfz1,
							name: 'file',
							header: {
								"Authori-zation": 'Bearer ' + that.token
							},
							methods: 'post',
							success: (res) => {
								let data = JSON.parse(res.data)
								console.log('上传地址', data)
								if (data.status == 200) {
									that.sfz1 = data.data.url
									uni.showToast({
										title: data.msg,
										icon: "none"
									})
								}
							}
						});
					}
				});
			},
			// 删除
			del(e) {
				if (this.disabled) return
				uni.showModal({
					title: "提示",
					content: "确定删除该图片吗?",
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							if (e == 1) return this.sfz1 = ''
							if (e == 2) return this.sfz2 = ''
							return
						}
						uni.showToast({
							title: "操作取消!",
							icon: "none"
						})
					}

				})
			},
			// 删除
			del1(a, b, c) { // type item index
				// if (this.disabled) return
				uni.showModal({
					title: "提示",
					content: "确定删除该图片吗?",
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							if (a == 1) {
								this.pz.splice(c, 1)
							}
							if (b == 2) {
								this.zs.splice(c, 1)
							}
							return
						}
						uni.showToast({
							title: "操作取消!",
							icon: "none"
						})
					}

				})
			},
			//反面
			choose1() {
				if (this.disabled) return
				let that = this
				// 选择图片文件
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.sfz2 = res.tempFilePaths[0]
						uni.uploadFile({
							url: that.uploadUrl, //仅为示例，非真实的接口地址
							filePath: that.sfz2,
							methods: 'post',
							header: {
								"Authori-zation": 'Bearer ' + that.token
							},
							name: 'file',
							success: (res) => {
								let data = JSON.parse(res.data)
								console.log('上传地址', data)
								if (data.status == 200) {
									that.sfz2 = data.data.url
									uni.showToast({
										title: data.msg,
										icon: "none"
									})
								}
							}
						});
					}
				});
			},
			//凭证
			choose2() {
				// if(this.disabled) return
				let that = this
				// 选择图片文件
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.uploadFile({
							url: that.uploadUrl, //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							methods: 'post',
							header: {
								"Authori-zation": 'Bearer ' + that.token
							},
							name: 'file',
							success: (res) => {
								let data = JSON.parse(res.data)
								console.log('上传地址', data)
								if (data.status == 200) {
									that.pz.push(data.data.url)
									uni.showToast({
										title: data.msg,
										icon: "none"
									})
								}
							}
						});
					}
				});
			},
			//证书
			choose3() {
				// if(this.disabled) return
				let that = this
				// 选择图片文件
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.uploadFile({
							url: that.uploadUrl, //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							methods: 'post',
							header: {
								"Authori-zation": 'Bearer ' + that.token
							},
							name: 'file',
							success: (res) => {
								let data = JSON.parse(res.data)
								console.log('上传地址', data)
								if (data.status == 200) {
									that.zs.push(data.data.url)
									uni.showToast({
										title: data.msg,
										icon: "none"
									})
								}
							}
						});
					}
				});
			},
			// 处理数据
			deal(arr) {
				if (arr.length == 0) return;
				let result = ''
				arr.forEach(item => {
					result += item + ','
				})
				return result;
			},
			examine() {
				if (!this.nickname || !this.worker_phone || !this.contact_user_name || !this.contact_mobile || !this
					.address || !this.sfz1 || !this.sfz2) {
					console.log('上传的数据', this.nickname, this.worker_phone, this.contact_user_name, this.contact_mobile,
						this
						.address, this.sfz1, this.sfz2)
					uni.showToast({
						title: "请完善信息再尝试!",
						icon: "none"
					})
					return
				}
				let data = {
					nickname: this.nickname,
					worker_phone: this.worker_phone,
					contact_user_name: this.contact_user_name,
					contact_mobile: this.contact_mobile,
					addres: this.address,
					id_card_pros: this.sfz1,
					id_card_cons: this.sfz2
				}
				if (this.pz.length) {
					data.insures = this.deal(this.pz)
				}  
				if (this.zs.length) {
					data.certificate = this.deal(this.zs)
				}
				worker_verify(data).then((res) => {
					console.log('师傅审核资质')
					console.log(res)
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					if (res.status == 200) {
						let userInfo = uni.getStorageSync('userInfo')
						userInfo.verify_status = 1
						uni.setStorageSync('userInfo', userInfo)

						uni.navigateTo({
							url: "/pages/sf/zlbj/zlbj"
						})
						userinfo().then(res => {
							console.log('用户信息更新成功！', res)
							uni.setStorageSync('userInfo', res.data)
						})
					}
				})
			},

		}
	}
</script>

<style scoped lang="less">
	.warp {
		position: relative;
		height: 100%;
		.logon {
			border-radius: 40rpx;
			width: 450rpx;
			z-index: 99;
			height: 80rpx;
			text-align: center;
			line-height: 84rpx;
			color: #fff;
			font-size: 30rpx;
			position: fixed;
			bottom: 100rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.info {
		width: 90%;
		// height: 1000rpx;
		left: 50%;
		position: absolute;
		top: 60rpx;
		border-radius: 10rpx;
		transform: translateX(-50%);
		opacity: 1;
		background-color: #FFFFFF;
	}

	.box {
		width: 600rpx;
		// height: 750rpx;
		border-radius: 20rpx;
		position: absolute;
		// top: 330rpx;
		left: 50%;
		transform: translate(-50%);
		background-color: #fff;

		padding: 30rpx 20rpx;

		input {
			display: inline-block;
			width: 65%;
			vertical-align: middle;
		}

		view {
			line-height: 80rpx;
			border-bottom: 2rpx solid #f0efef;
			color: #333;
		}

		>view:last-of-type {
			border: none;
		}
	}



	.code {
		width: 150rpx;
		font-size: 20rpx;
	}

	.userId {
		>view {
			width: 400rpx;
			height: 280rpx;
			border: 4rpx solid #029E8E;
			margin: 0 auto;
			margin-bottom: 30rpx;

			>view {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				border: 6rpx solid #fff;
				background: rgba(229, 245, 243, 0.39);
				text-align: center;
			}

			image {
				width: 100%;
				height: 100%;
				// background: red;
			}
		}
	}

	.userId1 {
		height: 100% !important;
		>view {
			width: 400rpx;
			height: 100%;
			border: 4rpx solid #029E8E;
			margin: 0 auto;
			margin-bottom: 30rpx;

			>view {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				border: 6rpx solid #fff;
				background: rgba(229, 245, 243, 0.39);
				text-align: center;
			}

			image {
				width: 100%;
				height: 200rpx;
				margin-top: 20rpx;
				// background: red;
			}
		}
	}

	.img-sfz {
		margin-top: 20rpx;
		text-align: center;
		color: #029E8E !important;
		font-size: 100rpx;
	}

	.del {
		color: #FD3833;
		font-size: 20rpx;
	}

	.red {
		color: red;
		margin-right: 0rpx;
	}
</style>
